import { Avatar } from 'antd';
import React, { Component } from 'react';

import styles from './index.less';
import { connect } from 'dva';

@connect(({ global }) => ({ userInfo: global.userInfo }))
export default class PageHeaderTop extends Component {

  render() {
    const userInfo = this.props.userInfo || {};

    return (
      <div className={styles.pageHeader}>
        <div className={styles.wide}>
          <div className={styles.pageHeaderContent}>
            <div className={styles.avatar}>
              {
                userInfo.photo ? (
                  <Avatar size="large" src={`${userInfo.photo}`}/>
                ) : (
                  <Avatar size={'large'} icon="user"/>
                )
              }
            </div>
            <div className={styles.content}>
              <div className={styles.contentTitle}>
                您好，
                {userInfo.name || '...'}
                ，祝您开心每一天！
              </div>
              <div>
                {`${userInfo.job ? userInfo.job.name || '' : userInfo.roleName || ''}`} | {`${userInfo.dept ? userInfo.dept.name : ''}`}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

}

PageHeaderTop.defaultProps = {};
